<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="appUserList">
      <el-table-column label="爱洞ID" align="center" prop="platformId"/>
      <el-table-column label="手机号" align="center" prop="phone"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="等级" align="center" prop="level"/>
      <el-table-column label="账号类型" align="center" prop="accountType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_account_type" :value="scope.row.accountType"/>
        </template>
      </el-table-column>
      <el-table-column label="实名认证" align="center" prop="cardAuth">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_check_status" :value="scope.row.cardAuth"/>
        </template>
      </el-table-column>
      <el-table-column label="真人认证" align="center" prop="videoAuth">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_check_status" :value="scope.row.videoAuth"/>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_appuser_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" align="center" prop="onlineStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_online_status" :value="scope.row.onlineStatus"/>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-close"
                     @click="unBindUser(scope.row)" v-hasPermi="['system:appUser:unBindUser']">取消绑定
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

  </div>
</template>

<script>
import {listAppUser, unBindUser} from "@/api/service/appUser/appUser";

export default {
  name: "indexInvited",
  props: {
    upid: {
      type: String,
      default: '-1'
    }
  },
  dicts: ['app_check_status', 'sys_yes_no', 'app_appuser_status', 'sys_user_sex', 'app_online_status', 'app_account_type', 'limit_type'],
  components: {},
  data() {
    return {
      src: "/400/400",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户基本信息-扩展(存放一些不重要但是必要的信息)表格数据
      appUserList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pid: this.upid

      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    unBindUser(row) {
      this.$modal.confirm('是否取消用户绑定关系').then(() => {
        this.loading = true;
        return unBindUser({
          id: row.id
        });
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("取消成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });

    },
    /** 查询用户基本信息-扩展(存放一些不重要但是必要的信息)列表 */
    getList() {
      if (this.upid) {
        this.loading = true;
        listAppUser(this.queryParams).then(response => {
          this.appUserList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }

    }
    ,

  }
}
;
</script>

<style lang="css">
.detail {
  width: 800px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
